---
title: Coronavirus (COVID‑19)
name: Campaign page
scenario: |
  You want to know the latest updates on the coronavirus pandemic.
  This is an example of a complex campaign page.

notes: Based on https://www.gov.uk/coronavirus
---

{% extends "layouts/full-page-example.njk" %}

{% from "govuk/components/header/macro.njk" import govukHeader %}
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{% set pageTitle = example.title %}
{% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}

{% block head %}
    {{ super() }}
    <link rel="stylesheet" href="/stylesheets/full-page-examples/campaign-page.min.css">
{% endblock %}

{% block header %}
  {{ govukHeader({
    homepageUrl: "#",
    classes: "app-header--campaign"
  }) }}
{% endblock %}

{% block main %}
  <div class="app-covid-banner-top">
    <div class="govuk-width-container">
      <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
          {{ govukBreadcrumbs({
            items: [
              {
                text: "Home",
                href: "/"
              }
            ]
          }) }}
          <h1 class="govuk-heading-xl govuk-!-margin-bottom-5">{{ pageTitle }}</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="app-covid-banner-bottom">
    <div class="govuk-width-container">
      <div class="govuk-grid-row app-covid-banner-bottom">
        <div class="govuk-grid-column-two-thirds">
          <h2 class="govuk-heading-m">National lockdown: stay at home</h2>
          <p class="govuk-body">Coronavirus (COVID‑19) is spreading fast.</p>
          <p class="govuk-body">Do not leave your home unless necessary.</p>
          <p class="govuk-body">1 in 3 people who have the virus have no symptoms, so you could be spreading it without knowing it.</p>
          <a class="govuk-link govuk-link--inverse app-cta-link" href="">Find out what the rules are</a>
        </div>
      </div>
    </div>
  </div>

  <div class="govuk-width-container">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-third">
        <div class="app-nhs-box">
          <h2 class="govuk-heading-m">If you have any coronavirus symptoms:</h2>
          <ul class="govuk-list govuk-list--bullet">
            <li>a high temperature</li>
            <li>a new, continuous cough</li>
            <li>a loss of, or change to, your sense of smell or taste</li>
          </ul>
          <p class="govuk-body govuk-!-font-weight-bold"><a class="govuk-link" href="#">Get a test</a> and stay at home</p>
        </div>
        <div class="app-danger-box">
          <h2 class="govuk-heading-m">Find out what support you can get</h2>
          <p class="govuk-body">For example, if you’re out of work, need to get food, or want to take care of your mental health.</p>
          <p class="govuk-body govuk-!-font-weight-bold"><a class="govuk-link govuk-link--inverse" href="#">Find support</a></p>
        </div>
      </div>
      <div class="govuk-grid-column-two-thirds">
        <section class="govuk-!-margin-bottom-8">
          <h2 class="govuk-heading-m">Recent and upcoming changes</h2>
          <h3 class="govuk-heading-s">27 January</h3>
          <p class="govuk-body">The Prime Minister has announced that <a class="govuk-link" href="#">it’ll not be possible to resume face-to-face learning</a> for the majority of pupils and students until 8 March at the earliest.</p>
          <p class="govuk-body">The Prime Minister has also announced <a class="govuk-link" href="#">further measures at the border</a>, including the strengthening of requirements for some arrivals through hotel isolation. We’ll set out more details in due course.</p>
          <h3 class="govuk-heading-s">5 January</h3>
          <p class="govuk-body"><a class="govuk-link" href="#">National lockdown rules apply in England</a>. Stay at home. Find out what the rules are in <a class="govuk-link" href="#">Scotland</a>, <a class="govuk-link" href="#">Wales</a> and <a class="govuk-link" href="#">Northern Ireland</a>.</p>
          <p class="govuk-body"><a class="govuk-link" href="#">Shielding has resumed in England</a>. If you’re shielding, do not attend work, school, college or university. You can get <a class="govuk-link" href="#">support if you’re clinically extremely vulnerable</a>, for example priority access to supermarket deliveries.</p>
        </section>
        <section class="app-section">
          <h2 class="govuk-heading-m">Announcements</h2>
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1"><a class="govuk-link" href="#">Schools and colleges will not return to full face-to-face education after February half-term</a></h3>
          <p class="govuk-body">Published 27 January 2021</p>
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1"><a class="govuk-link" href="#">New rules for people travelling in to and out of the UK</a></h3>
          <p class="govuk-body">Published 27 January 2021</p>
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1"><a class="govuk-link" href="#">New hard-hitting national TV ad urges the nation to stay at home</a></h3>
          <p class="govuk-body">Published 27 January 2021</p>
          <p class="govuk-body"><a class="govuk-link" href="#">See all announcements</a></p>
        </section>
        <section class="app-section">
        {{ govukAccordion({
          id: "accordion-default",
          items: [
            {
              heading: {
                text: "Staying safe"
              },
              expanded: true,
              content: {
                html: "<p class='govuk-body'>This is the content for Staying for the web.</p>"
              }
            },
            {
              heading: {
                text: "International travel"
              },
              content: {
                html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
              }
            },
              {
              heading: {
                text: "Vaccination"
              },
              content: {
                html: "<ul class='govuk-list govuk-list--bullet'><li>Example item 2</li></ul>"
              }
            },
              {
              heading: {
                text: "Self-employment and businesses"
              },
              content: {
                html: "<p class='govuk-body'>This is the content for How people read.</p>"
              }
            }
          ]
        }) }}
        </section>
        <section class="app-section govuk-!-margin-bottom-8">
          <h2 class="govuk-heading-m">Announcements</h2>
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1"><a class="govuk-link" href="#">Daily summary of coronavirus testing, cases and vaccinatons</a></h3>
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1"><a class="govuk-link" href="#">All data and analysis on coronavirus</a></h3>
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1"><a class="govuk-link" href="#">Coronavirus cases by local authority</a></h3>
        </section>

        {{ govukAccordion({
          id: "accordion-summaries",
          items: [
            {
              heading: {
                text: "Meeting accessibility requirements"
              },
              summary: {
                text: "Getting an audit, understanding WCAG 2.1, preparing for assessment"
              },
              content: {
                html: "<ul class='govuk-list'><li><a class='govuk-link' href='#'>Making your service accessible: an introduction</a></li><li><a class='govuk-link' href='#'>Understanding WCAG 2.1</a></li><li><a class='govuk-link' href='#'>Getting an accessibility audit</a></li><li><a class='govuk-link' href='#'>Testing for accessibility</a></li><li><a class='govuk-link' href='#'>Publishing information about your service's accessibility</a></li></ul>"
              }
            },
            {
              heading: {
                text: "Providing assisted digital support"
              },
              summary: {
                html: "<span class='govuk-!-font-weight-regular'>Helping people who don't have the skills or access to use a service.</span>"
              },
              content: {
                html: "<ul class='govuk-list'><li><a class='govuk-link' href='#'>Making your service accessible: an introduction</a></li><li><a class='govuk-link' href='#'>Understanding WCAG 2.1</a></li><li><a class='govuk-link' href='#'>Getting an accessibility audit</a></li><li><a class='govuk-link' href='#'>Testing for accessibility</a></li><li><a class='govuk-link' href='#'>Publishing information about your service's accessibility</a></li></ul>"
              }
            },
              {
              heading: {
                text: "Managing user support"
              },
              summary: {
                text: "Estimating demand, setting target levels, measuring support performance"
              },
              content: {
                html: "<ul class='govuk-list'><li><a class='govuk-link' href='#'>Making your service accessible: an introduction</a></li><li><a class='govuk-link' href='#'>Understanding WCAG 2.1</a></li><li><a class='govuk-link' href='#'>Getting an accessibility audit</a></li><li><a class='govuk-link' href='#'>Testing for accessibility</a></li><li><a class='govuk-link' href='#'>Publishing information about your service's accessibility</a></li></ul>"
              }
            }
          ]
        }) }}

        <section class="app-section govuk-!-margin-bottom-8">
          <h2 class="govuk-heading-m">All coronavirus information on GOV.UK</h2>
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1"><a class="govuk-link" href="#">Guidance</a></h3>
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1"><a class="govuk-link" href="#">News</a></h3>
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1"><a class="govuk-link" href="#">Legislation (legislation.gov.uk)</a></h3>
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1"><a class="govuk-link" href="#">Press conferences (YouTube)</a></h3>
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1"><a class="govuk-link" href="#">Press conference statements</a></h3>
        </section>

        {{ govukAccordion({
          id: "accordion-summaries-short",
          items: [
            {
              heading: {
                text: "Accessibility requirements"
              },
              summary: {
                text: "Assessments"
              },
              content: {
                html: "<ul class='govuk-list'><li><a class='govuk-link' href='#'>Making your service accessible: an introduction</a></li><li><a class='govuk-link' href='#'>Understanding WCAG 2.1</a></li><li><a class='govuk-link' href='#'>Getting an accessibility audit</a></li><li><a class='govuk-link' href='#'>Testing for accessibility</a></li><li><a class='govuk-link' href='#'>Publishing information about your service's accessibility</a></li></ul>"
              }
            },
            {
              heading: {
                text: "User support"
              },
              summary: {
                text: "Estimating demand"
              },
              content: {
                html: "<ul class='govuk-list'><li><a class='govuk-link' href='#'>Making your service accessible: an introduction</a></li><li><a class='govuk-link' href='#'>Understanding WCAG 2.1</a></li><li><a class='govuk-link' href='#'>Getting an accessibility audit</a></li><li><a class='govuk-link' href='#'>Testing for accessibility</a></li><li><a class='govuk-link' href='#'>Publishing information about your service's accessibility</a></li></ul>"
              }
            }
          ]
        }) }}

        <div class="app-updates">
          <h3 class="govuk-heading-s">Stay up to date with GOV.UK</h3>
          <p class="govuk-body"><a class="govuk-link" href="#">Sign up to get emails when we change any coronavirus information on the GOV.UK website</a></p>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block footer %}


  {{ govukFooter({
    navigation: [
      {
        title: "Coronavirus (COVID-19)",
        width: "two-thirds",
        columns: 2,
        items: [
          {
            href: "#",
            text: "Coronavirus (COVID-19): guidance and support"
          },
          {
            href: "#",
            text: "Another link"
          },
          {
            href: "#",
            text: "Another link"
          },
          {
            href: "#4",
            text: "Another link"
          }
        ]
      },
      {
        title: "Services and Information",
        width: "two-thirds",
        columns: 2,
        items: [
          {
            href: "#",
            text: "Benefits"
          },
          {
            href: "#",
            text: "Births, deaths and marriages"
          },
          {
            href: "#",
            text: "Business and self-employed"
          },
          {
            href: "#",
            text: "Childcare and parenting"
          },
          {
            href: "#",
            text: "Citizenship and living in the UK"
          },
          {
            href: "#",
            text: "Crime, justice and the law"
          },
          {
            href: "#",
            text: "Disabled people"
          },
          {
            href: "#",
            text: "Driving and transport"
          },
          {
            href: "#",
            text: "Education and learning"
          },
          {
            href: "#",
            text: "Employing people"
          },
          {
            href: "#",
            text: "Environment and countryside"
          },
          {
            href: "#",
            text: "Housing and local services"
          },
          {
            href: "#",
            text: "Money and tax"
          },
          {
            href: "#",
            text: "Passports and living abroad"
          },
          {
            href: "#",
            text: "Visas and immigration"
          },
          {
            href: "#",
            text: "Working, jobs and pensions"
          }
        ]
      },
      {
        title: "Departments and policy",
        width: "one-third",
        items: [
          {
            href: "#",
            text: "How government works"
          },
          {
            href: "#",
            text: "Departments"
          },
          {
            href: "#",
            text: "Worldwide"
          },
          {
            href: "#",
            text: "Services"
          },
          {
            href: "#",
            text: "Guidance and regulation"
          },
          {
            href: "#",
            text: "News and communications"
          },
          {
            href: "#",
            text: "Research and statistics"
          },
          {
            href: "#",
            text: "Policy papers and consultations"
          },
          {
            href: "#",
            text: "Transparency and freedom of information releases"
          }
        ]
      }
    ]
  }) }}
{% endblock %}
